<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可编辑表格</title>
    <style>
        .normal-table{
            margin:0;
            width:100%;
        }
        .normal-table,.normal-table th,.normal-table td{
            border:1px solid #ccc;
            border-collapse: collapse;
        }
        .normal-table td{
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <table class="normal-table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>电话</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody  id="normal-table__tbody">
                <tr>
                    <td>1</td>
                    <td class="editable-td" data-oid="1_userName">admin</td>
                    <td class="editable-td" data-oid="1_nickName">决不投降法兰西</td>
                    <td class="editable-td" data-oid="1_phone">123456</td>
                    <td class="editable-td" data-oid="1_address">欧洲大陆西部</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td class="editable-td" data-oid="2_userName">manager</td>
                    <td class="editable-td" data-oid="2_nickName">海军最强德意志</td>
                    <td class="editable-td" data-oid="2_phone">54321</td>
                    <td class="editable-td" data-oid="2_address">欧洲大陆中部</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td class="editable-td" data-oid="3_userName">administrator</td>
                    <td class="editable-td" data-oid="3_nickName">英勇差善战意大利</td>
                    <td class="editable-td" data-oid="3_phone">4325488</td>
                    <td class="editable-td" data-oid="3_address">欧洲大陆南部</td>
                </tr>
            </tbody>

        </table>
    </main>
</body>
</html>
<script>
    document.getElementById("normal-table__tbody").addEventListener("dblclick",event=>{
        let tbody = document.getElementById("normal-table__tbody");
        let arrays = tbody.querySelectorAll("input[type='text']");  //获取表格所有的文本框
        //确保表格中只有一个可编辑文本框
        if(arrays.length!=0){
            //将所有的文档框删除掉，同时将其中的文本数据复制给其父节点（td）
            arrays.forEach(item=>{
                let text = item.value;
                item.parentElement.innerHTML = text;
            });
        }
        let node = event.target;    //获取事件源节点，在这里只可能是td。
        if(event.target.classList.contains("editable-td")){
        let text = node.innerHTML;  //获取td中的标签体
        //ES6中的新写法，基于字符模板。往td中添加一个包含原文本的文本框，将原文本冲掉。
        node.innerHTML =`<input type='text' value='${text}'>`;  //node.nnerHTML = "<input type='text value='"+text+"'";
        node.firstElementChild.focus();     //同时让文本框获得焦点。
        //给td中的文本框一个丢失焦点监听器，当焦点丢失，删除文本框，并将文本框中的文本加入td的标签体
        node.firstElementChild.addEventListener('blur',()=>{
            let text = node.firstElementChild.value;
            let rowValue = node.dataset.oid.split("_");
            console.log(rowValue);
            //TODO:往服务器端提交数据{value:text,id:rowValue[0],columnName:rowValue[1]}
            node.innerHTML = text;
        },false);
    }
    },false);
</script>